<template>
  <div class="progress">
    <van-nav-bar
      title="维权进度"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    
    <div class="progress-container">
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-number">{{ stats.total }}</div>
          <div class="stat-label">总案件</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ stats.processing }}</div>
          <div class="stat-label">进行中</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ stats.completed }}</div>
          <div class="stat-label">已完成</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ stats.success }}</div>
          <div class="stat-label">胜诉</div>
        </div>
      </div>
      
      <!-- 筛选标签 -->
      <van-tabs v-model:active="activeTab" @change="onTabChange">
        <van-tab title="全部" name="all" />
        <van-tab title="进行中" name="processing" />
        <van-tab title="已完成" name="completed" />
        <van-tab title="已暂停" name="paused" />
      </van-tabs>
      
      <!-- 案件列表 -->
      <div class="case-list">
        <div
          v-for="caseItem in filteredCases"
          :key="caseItem.id"
          class="case-item"
          @click="goToCaseDetail(caseItem.id)"
        >
          <div class="case-header">
            <div class="case-title">{{ caseItem.title }}</div>
            <van-tag
              :type="getStatusType(caseItem.status)"
              size="small"
            >
              {{ getStatusText(caseItem.status) }}
            </van-tag>
          </div>
          
          <div class="case-info">
            <div class="case-type">{{ caseItem.type }}</div>
            <div class="case-time">{{ formatTime(caseItem.createTime) }}</div>
          </div>
          
          <div class="case-progress">
            <div class="progress-text">
              进度: {{ caseItem.currentStep }}/{{ caseItem.totalSteps }}
            </div>
            <van-progress
              :percentage="(caseItem.currentStep / caseItem.totalSteps) * 100"
              :color="getProgressColor(caseItem.status)"
              stroke-width="4"
            />
          </div>
          
          <div class="case-description">
            {{ caseItem.description }}
          </div>
          
          <div class="case-actions">
            <van-button
              v-if="caseItem.status === 'processing'"
              size="small"
              type="primary"
              @click.stop="updateProgress(caseItem.id)"
            >
              更新进度
            </van-button>
            <van-button
              size="small"
              plain
              @click.stop="viewDetails(caseItem.id)"
            >
              查看详情
            </van-button>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <van-empty
        v-if="filteredCases.length === 0"
        description="暂无维权案件"
        image="search"
      >
        <van-button
          type="primary"
          size="small"
          @click="$router.push('/ai/diagnosis')"
        >
          开始维权
        </van-button>
      </van-empty>
    </div>
    
    <!-- 添加案件按钮 -->
    <van-floating-bubble
      icon="plus"
      @click="addCase"
    />
  </div>
</template>

<script>
export default {
  name: 'Progress',
  data() {
    return {
      activeTab: 'all',
      stats: {
        total: 0,
        processing: 0,
        completed: 0,
        success: 0
      },
      cases: []
    }
  },
  computed: {
    filteredCases() {
      if (this.activeTab === 'all') {
        return this.cases
      }
      return this.cases.filter(item => item.status === this.activeTab)
    }
  },
  created() {
    this.loadCases()
  },
  methods: {
    loadCases() {
      // 模拟案件数据
      this.cases = [
        {
          id: 1,
          title: '劳动合同纠纷案',
          type: '劳动纠纷',
          status: 'processing',
          currentStep: 3,
          totalSteps: 5,
          description: '公司违法解除劳动合同，要求赔偿经济补偿金',
          createTime: new Date('2024-01-15'),
          updateTime: new Date()
        },
        {
          id: 2,
          title: '工伤赔偿案',
          type: '工伤赔偿',
          status: 'completed',
          currentStep: 4,
          totalSteps: 4,
          description: '工作期间受伤，申请工伤认定和赔偿',
          createTime: new Date('2023-12-01'),
          updateTime: new Date('2024-01-20')
        },
        {
          id: 3,
          title: '拖欠工资案',
          type: '劳动纠纷',
          status: 'paused',
          currentStep: 2,
          totalSteps: 5,
          description: '公司拖欠工资3个月，申请劳动仲裁',
          createTime: new Date('2024-02-01'),
          updateTime: new Date()
        }
      ]
      
      this.updateStats()
    },
    updateStats() {
      this.stats.total = this.cases.length
      this.stats.processing = this.cases.filter(item => item.status === 'processing').length
      this.stats.completed = this.cases.filter(item => item.status === 'completed').length
      this.stats.success = this.cases.filter(item => item.status === 'completed' && item.result === 'success').length
    },
    onTabChange(name) {
      this.activeTab = name
    },
    formatTime(time) {
      return new Date(time).toLocaleDateString()
    },
    getStatusType(status) {
      const typeMap = {
        processing: 'primary',
        completed: 'success',
        paused: 'warning',
        failed: 'danger'
      }
      return typeMap[status] || 'default'
    },
    getStatusText(status) {
      const textMap = {
        processing: '进行中',
        completed: '已完成',
        paused: '已暂停',
        failed: '已失败'
      }
      return textMap[status] || '未知'
    },
    getProgressColor(status) {
      const colorMap = {
        processing: '#1989fa',
        completed: '#07c160',
        paused: '#ff976a',
        failed: '#ee0a24'
      }
      return colorMap[status] || '#1989fa'
    },
    goToCaseDetail(id) {
      this.$router.push(`/progress/case/${id}`)
    },
    viewDetails(id) {
      this.goToCaseDetail(id)
    },
    updateProgress(id) {
      this.$router.push(`/progress/update/${id}`)
    },
    addCase() {
      this.$actionSheet({
        actions: [
          { name: 'AI智能诊断', value: 'ai' },
          { name: '手动添加案件', value: 'manual' }
        ]
      }).then(action => {
        if (action.value === 'ai') {
          this.$router.push('/ai/diagnosis')
        } else if (action.value === 'manual') {
          this.$router.push('/progress/add')
        }
      })
    }
  }
}
</script>

<style scoped>
.progress {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

.progress-container {
  padding: 0 15px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 15px 0;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 15px 10px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.case-list {
  margin-top: 15px;
}

.case-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.case-title {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

.case-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
}

.case-progress {
  margin-bottom: 10px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.case-description {
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-actions {
  display: flex;
  gap: 10px;
}

.van-floating-bubble {
  right: 20px;
  bottom: 80px;
}
</style>